<extend name="common/base" />
<block name="resource">
    <link href="__PUBLIC__/Home/ui3/css/jquery.mCustomScrollbar.min.css" rel="stylesheet"/>
    <link href="__PUBLIC__/Home/ui3/css/video.css?v=1.0" rel="stylesheet">
    <link href="__PUBLIC__/Home/ui3/css/person.css?v=1.0" rel="stylesheet">
    <link href="__PUBLIC__/Home/ui3/css/leftCommon.css?v=1.0.1" rel="stylesheet">

    <script src="__PUBLIC__/Home/ui3/js/web/scroll.js?v=1.0" type="text/javascript"></script>
    <script src="__PUBLIC__/Home/ui3/js/web/search/user.js?v=1.0"></script>
    <script type="text/javascript">
        window._THIS = {
            searchHotUrl : "{:U('api/search/hot', ['per' => 10])}",
            searchUserUrl : "{:U('api/search/users')}",
            activeUserUrl : "{:U('search/activeUser')}",
            resultPager : {$resultPager},
            videoSearchUrl : "{:U('search/video')}",
            userLink : "{:U('others/index')}",
            followUrl : {
                dofollow : "{:U('follow/dofollow')}",
                unfollow : "{:U('follow/unfollow')}",
            },
            timestamp : "{$timestamp}",
            keywords : "{$keywords}",
            page : 0,
            bgList : [
                '__PUBLIC__/Home/ui3/images/user_bg_1.jpg',
                '__PUBLIC__/Home/ui3/images/user_bg_2.jpg',
                '__PUBLIC__/Home/ui3/images/user_bg_3.jpg',
                '__PUBLIC__/Home/ui3/images/user_bg_4.jpg',
                '__PUBLIC__/Home/ui3/images/user_bg_5.jpg',
            ],
        };
        function dataInit() {
            if (_THIS.keywords) {
                search();
            } else {
                var users = {$users|json_encode};
                viewModel.result(getUsers(users));
                viewModel.isPending(false);
            }
        }
    </script>
</block>
<block name="content">
    <div class="subnav">
        <div class="container">
            <div class="subnav-left"></div>
            <div class="subnav-right">
                <div class="input1">
                    <input type="text" placeholder="输入关键字搜索" value="{$keywords}"/>
                    <i class="cha" title="清空搜索"></i>
                </div>
                <button class="btn3" title="搜索视频">搜索</button>
                <div class="btn-group">
                    <button class="btn1" title="找视频" data-bind="click:searchVideo">找视频</button>
                    <button class="btn2" title="找人">找人</button>
                </div>
            </div>
        </div>
    </div>
    <div class="main">
        <div class="container">
            <div class="main-left">
                <div class="shadow"></div>
                <div class="all-search">
                    <div class="all-title">
                        <div class="title-content">大家都在搜</div>
                        <span></span>
                    </div>
                    <div class="search-list">
                        <ul data-bind="foreach:hot">
                            <li title="" data-bind="attr:{'title':text}">
                                <a href="" data-bind="attr:{'href':link}">
                                    <i class="rank" data-bind="text:$index()+1"></i>
                                    <div class="gname" data-bind="text:text"></div>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="main-right">
                <!-- ko if:result().length > 0 -->
                <div class="right-box row" data-bind="foreach:result">
                    <div class="person-list col-lg-4 col-md-4 col-xs-4">
                        <div class="person-list-img" title="" data-bind="attr:{'title':nickname}, style:{'background-image':bgCss}">
                            <a href="" data-bind="attr:{'href':userLink}" class="relative">
                                <img src="" alt="" data-bind="attr:{'src':avatar, 'alt':nickname}">
                                <!-- ko if:auth -->
                                <img src="" title="" data-bind="attr:{'src':auth.pic,'title':auth.name}" class="newG-icon">
                                <!-- /ko -->
                            </a>
                        </div>
                        <div class="person-list-info">
                            <span class="person-nick" data-bind="text:nickname"></span>
                            <!-- ko if:gender=='男' -->
                                <span class="male"></span>
                            <!-- /ko -->
                            <!-- ko if:gender=='女' -->
                                <span class="female"></span>
                            <!-- /ko -->
                        </div>
                        <div class="person-list-btn">
                            <button data-bind="css:{'do-follow':!isFollowed(), 'do-followed':isFollowed()}, click:follow, text:isFollowed()?'已关注':'关注'"></button>
                        </div>
                    </div>
                </div>
                <!-- /ko -->
                <!-- ko if:(result().length == 0 && !isPending()) -->
                <div class="list-item-null">
                    <div class="null-img"></div>
                    <div class="null-info">很遗憾，没有找到相关，试试其他的吧...</div>
                </div>
                <!-- /ko -->
                <!-- ko if:isPending -->
                <div class="load-comment">
                    <i><img src="__PUBLIC__/Home/ui3/images/loading.gif" alt="正在加载，请稍候..."/></i>
                    <span>正在加载，请稍候...</span>
                </div>
                <!-- /ko -->
            </div>
        </div>
        <div class="backTop" id="backTop" title="返回顶部">
            <a href="javascript:void(0);"></a>
        </div>
    </div>
</block>